<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { FormInstance, Message } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';
  import { useUserStore } from '@/store';
  import { getAllFlow } from '@/api/syssetting';
  import { submitApproval, getFirstApproval } from '@/api/approve';

  const formRef = ref<FormInstance | null>(null);
  const props = defineProps({
    visible: Boolean,
    params: Object,
  });
  const { loading, setLoading } = useLoading();
  defineOptions({
    name: 'submitSetting',
  });
  const userStore = useUserStore();

  const sonFormType = ref();

  onMounted(() => {
    getAllFlow({
      flow_type: 1, // 默认档案借阅,
    }).then((res) => {
      sonFormType.value = [
        {
          name: 'borrow_arc_type',
          label: '审批流程',
          type: 'a-select',
          fieldProps: {
            span: 24,
            allowSearch: true,
            fieldNames: { value: 'flow_id', label: 'flow_name' },
          },
          selectOptions: res.data,
          rules: [
            {
              message: '请输入菜单图标',
              required: true,
            },
          ],
        },
      ];
    });
  });
  const formData = ref({});
  const emit = defineEmits(['update:visible', 'refresh']);

  // 监听审批流程
  const checkUser = ref([]);
  watch(
    () => formRef.value?.formModel.borrow_arc_type,
    (newVal) => {
      setLoading(true);
      getFirstApproval({
        data_id: props.params.id,
        flow_id: newVal,
      })
        .then((res: any) => {
          checkUser.value = res.data.approve;
        })
        .finally(() => {
          setLoading(false);
        });
    }
  );
  const handleSubmit = async () => {
    try {
      // 先验证表单基础校验
      if (!formRef.value?.checkForm()) {
        return;
      }
      // 所有校验通过后执行提交
      setLoading(true);
      const res = await submitApproval({
        data_id: props.params.id,
        flow_id: formRef.value?.formModel.borrow_arc_type,
      });

      Message.success(res.msg);
      emit('update:visible', false);
      emit('refresh');
    } finally {
      setLoading(false);
    }
  };
</script>

<template>
  <a-modal
    title="提交审批申请"
    :visible="visible"
    @ok="handleSubmit"
    title-align="start"
    :ok-loading="loading"
    @cancel="
      () => {
        emit('update:visible', false);
      }
    "
  >
    <pro-form
      ref="formRef"
      hiddenBtn
      :form-json="sonFormType"
      :form-data="formData"
    ></pro-form>
    <a-row v-loading="loading">
      <a-col :span="24" style="margin-left: 10px">
        <a-timeline :style="{ marginRight: '40px' }">
          <a-timeline-item
            v-for="(item, index) in checkUser"
            :key="index"
            :label="`第${index + 1}个审批人员`"
          >
            <icon-user :size="20" />
            {{ item.name }}
          </a-timeline-item>
        </a-timeline>
      </a-col>
    </a-row>
  </a-modal>
</template>

<style scoped lang="less">
  :deep(.arco-select-view-inner) {
    text-align: left !important;
  }
  .iscard {
    width: 360px;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .cardBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .cardItem {
    display: flex;
    align-items: center;
    color: #1d2129;
  }
</style>
